PBA INSTITUTE

CSS Table

In CSS, tables can be styled using various properties to enhance their appearance and functionality. Properties like `border-collapse`, `border-spacing`, `padding`, and `background-color` can be applied to control the table's layout, spacing, and visual design. Additionally, `width` and `height` properties can specify dimensions, while `text-align` and `font` properties can ensure content within the table cells is properly aligned and styled. These CSS rules collectively help create visually appealing and well-structured tables on web pages.

Example of Table

Example 1

														
														

<!DOCTYPE html>
<html>
<head>
<style>
body{
  background-color:#D6EAF8;
}
th{
  background-color: grey;
}
table, th, td 
{
    border: 1px solid black;
    border-collapse: collapse;
}
th, td 
{
    padding: 10px;
    text-align: left;
}
</style>
</head>
<body>

<table style=width:300px>
  <tr>
    <th>Course Name</th>
    <th>Fees</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>JAVA</td>
    <td>8000</td>
    <td>3 Months</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>6000</td>
    <td>2 Months</td>
  </tr>
</table>

</body>
</html>


														
														
													

OUTPUT:

In this example, HTML code creates a webpage and a light blue background using CSS code. It contains a table styled with borders and collapsed border layout. The table has headers (Course Name, Fees, Duration) styled with grey background and cells (Java, Python) showing course details: fees and duration. Each cell has padding of 10 pixels and text aligned to the left. The table width is set to 300 pixels.

Example 2

														
														

<!DOCTYPE html>
<html>
<head>
<style>
body{
  background-color: #CCD1D1;
}
td{
  background-color: #BBDDF5;
}
table, th, td 
{
    border: 1px solid black;
    text-align: left;
}
th
{
  background-color: #48AFF7 ;
	
}
</style>
</head>
<body>

<table style="width:80%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Namita</td>
    <td>Pal</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Rokeiya</td>
    <td>Sultana</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>





														
														
													

In this example, a web page displaying a table with two rows and three columns. The table has a styled background and borders. Each row represents a person with their first name, last name, and points displayed in separate columns. The table header (th) cells are styled with a blue background, while data cells (td) have a lighter blue background.The table width is set to 80% of full width.

Conclusion :

In conclusion, Using CSS to style tables offers several benefits: it enhances readability by applying colors, borders, and alignment to table elements. This improves the structure and visual appeal of data presentation on web pages. CSS allows for consistent styling across different tables within a website, making it easier to maintain and update the design. Additionally, CSS provides flexibility to customize table appearance, making data easier to interpret and navigate for users. Overall, CSS styling enhances user experience and usability of tables in web design.

CSS Table

Example of Table

Conclusion :

CSS All Topics

SHARE